<template>
  <div class="project-carousel">
    <div class="swiper project-swiper">
      <div class="swiper-wrapper">
        <template v-for="(item, index) in homeProjectList" :key="index">
          <div class="swiper-slide" :data-id="item.id">
            <div class="type-project">
              <div class="entry-img">
                <img
                  :src="
                    $getImgUrlFromMediaById(item.featured_media_src_url)
                      ? $getImgUrlFromMediaById(item.featured_media_src_url)
                      : require('@/assets/image/blank-profile-picture-973460_640.png')
                  "
                  alt=""
                  style=""
                  class=""
                />
                <div class="entry-summary" style="">
                  <div class="entry-wrapper" style="">
                    <!-- 
                      <div class="entry-title">
                      {{ item.title.rendered }}
                    </div> 
                    -->
                  </div>
                  <!-- 
                    <a class="read-more" style="" :data-id="item.id">
                    view details
                  </a> 
                  -->
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="swiper-controller-wrapper">
      <!-- 
        <div class="swiper-button-prev">
        <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
      </div>
      <div class="swiper-button-next">
        <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
      </div> 
      -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
// Import Swiper Vue.js components
import Swiper, {
  Navigation,
  Pagination,
  Scrollbar,
  Controller,
  Autoplay,
} from "swiper";
// import { Swiper, SwiperSlide, useSwiper } from "swiper/vue";
// https://blog.csdn.net/weixin_42063951/article/details/121354984
// https://blog.csdn.net/yunchong_zhao/article/details/120970625
// Import Swiper styles
import "swiper/css";
// import "swiper/css/navigation";
// import "swiper/css/pagination";

import { getMediaById } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";

export default {
  name: "",
  components: {},
  props: {
    homeProjectList: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      swiperOptions: {
        modules: [Navigation, Pagination, Controller, Autoplay],
        loop: true, //循环
        // autoplay: { delay: 3000, disableOnInteraction: false }, //自动播放
        speed: 500,
        slidesPerView: "auto", //解决最后一张切换到第一张中间的空白
        // loopedSlides: props.homeProjectList.length,
        // slidesPerGroup: 2,
        // loopFillGroupWithBlank: true,
        breakpoints: {
          // when window width is >= 640px
          768: {
            slidesPerView: 2,
            spaceBetween: 50,
            slidesPerGroup: 2,
          },
        },
        // centeredSlides: true, //设置slide居中
        navigation: {
          prevEl: ".project-carousel .swiper-button-prev",
          nextEl: ".project-carousel .swiper-button-next",
        },
        pagination: {
          el: ".project-carousel .swiper-pagination",
          clickable: true,
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
          // type: "custom",
          //   renderCustom: function (swiper, current, total) {
          //     var customPaginationHtml = "";
          //     for (var i = 0; i < total; i++) {
          //       //判断哪个分页器此刻应该被激活
          //       if (i == current - 1) {
          //         customPaginationHtml +=
          //           '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
          //       } else {
          //         customPaginationHtml +=
          //           '<span class="swiper-pagination-customs"></span>';
          //       }
          //     }
          //     return (
          //       '<span class="swiperPag">' + customPaginationHtml + "</span>"
          //     );
          //   },
        },
        observer: true,
        observeParents: true,
        on: {
          click: function (swiper, event) {
            var id = swiper.slides[swiper.clickedIndex].dataset.id;
            methods.jumpDetail(id);
          },
        },
      },
      //
      homeProjectList: props.homeProjectList,
      //
    });

    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      // Swiper.use([Navigation, Pagination]); // 使用需要的功能
      const projectSwiper = new Swiper(".project-swiper", data.swiperOptions);
    });
    //
    const methods = {
      jumpDetail(id) {
        // console.log(id);
        proxy.$router.push(`/project/detail/${id}`);
      },
    };
    //
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
//

// .swiperPag {
//   width: 4.5rem;
//   height: 0.07rem;
//   border-radius: 0.04rem;
//   display: flex;
//   align-items: center;
//   margin: 0 auto;
//   background-color: rgba($color: #000000, $alpha: 0.8);
// }
// .swiper-pagination-fraction,
// .swiper-pagination-custom,
// .swiper-container-horizontal > .swiper-pagination-bullets {
//   bottom: 0.27rem;
// }
// .swiper-pagination-customs {
//   width: 1.5rem;
//   height: 0.14rem;
//   display: inline-block;
// }
// /*自定义分页器激活时的样式表现*/
// .swiper-pagination-customs-active {
//   width: 1.5rem;
//   height: 0.14rem;
//   display: inline-block;
//   border-radius: 0.07rem;
//   background-color: #28a7e1;
// }

.project-carousel {
  .type-project {
    position: relative;
    margin-bottom: 0;
    max-width: 100%;

    &:hover {
      cursor: pointer;
    }

    .entry-img {
      height: 40vh;
      overflow: hidden;
    }

    img {
      width: 100%;
      min-height: 100%;
      // overflow: hidden;
    }

    .entry-summary {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: center;

      .entry-wrapper {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        -wbekit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);

        .entry-title {
          font-size: 30px;
          font-family: "Source Sans Pro", sans-serif;
          font-weight: 300;
          text-transform: capitalize;
          line-height: 1;
          margin-bottom: 13px;
        }
      }
    }

    .read-more {
      position: absolute;
      bottom: 5%;
      right: 5%;
      text-transform: lowercase;
      padding-bottom: 6px;
      border-bottom: 1px solid #ffac56;
    }
  }

  .swiper-controller-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    ::v-deep .swiper-pagination {
      .my-bullet {
        border-radius: 50%;
        margin: 4px;
        background: rgba(71, 71, 71, 0.5);
        width: 1rem;
        height: 0.14rem;
        display: inline-block;
        transition: width 0.3s;
        cursor: pointer;
      }

      .my-bullet-active {
        display: inline-block;
        background-color: #28a7e1;
        width: 1rem;
        height: 0.14rem;
        border-radius: 4px;
      }

      .swiper-button-prev,
      .swiper-button-next {
        margin-left: 5px;
        font-size: 1.3rem;
      }
    }
  }
}
</style>
